/*
 * @Author: lyuan2018
 * @Date: 2019-06-18 10:32:49
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2019-10-15 17:14:27
 * 邮件设置主页
 */
import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { routerShape, locationShape } from 'react-router';
import { WeaTab, WeaRightMenu } from 'ecCom';

@inject('settingStore')
@observer
class Setting extends Component {
  static defaultProps = {
    prefixCls: 'email-setting',
  }
  static contextTypes = {
    router: routerShape,
    location: locationShape,
  };

  componentDidMount() {
    const { router } = this.context;
    const { location, settingStore: { getMailSetTabs, selectedKey, setStoreState } } = this.props;
    const curRoute = location.pathname.replace(/main\/email\/setting\/|main\/email\/setting/, '').replace(/\?_key=(.+)$/, '');
    getMailSetTabs().then((res) => { // for the tab router
      let notRoute = curRoute === '' || curRoute === '/';
      setStoreState({ topDatas: res.grouptinfo });
      if (selectedKey === '' && notRoute) {
        setStoreState({ selectedKey: res.grouptinfo[0].viewcondition });
        router.push(`/main/email/setting/${res.grouptinfo[0].viewcondition}`);
      } else if (!notRoute) {
        setStoreState({ selectedKey: curRoute });
        router.push(`/main/email/setting/${curRoute}`);
      } else {
        router.push(`/main/email/setting/${selectedKey}`);
      }
    });
  }

  componentWillReceiveProps(nextProps) {
    const { router } = this.context;
    const { settingStore: { setStoreState, topDatas } } = this.props;
    const curRoute = nextProps.location.pathname.replace(/main\/email\/setting\/|main\/email\/setting/, '').replace(/\?_key=(.+)$/, '');
    if (nextProps.location.pathname !== this.props.location.pathname) {
      let notRoute = curRoute === '' || curRoute === '/';
      let tempSelect = notRoute ? toJS(topDatas)[0].viewcondition : curRoute;
      setStoreState({ selectedKey: tempSelect });
      router.push(`/main/email/setting/${tempSelect}`);
    }
  }

  componentWillUnmount() {
    const { settingStore: { clear } } = this.props;
    clear();
  }

  tabChange = (key) => {
    const { router } = this.context;
    const { settingStore: { setStoreState } } = this.props;
    setStoreState({ selectedKey: key, rightMenuDatas: [] });
    router.push(`/main/email/setting/${key}`);
  }

  render() {
    const { prefixCls, settingStore } = this.props;
    const { topDatas, selectedKey, rightMenuDatas } = settingStore;
    return (
      <div className={prefixCls}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ycqc4w`} datas={toJS(rightMenuDatas)}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1xovui`}
            datas={toJS(topDatas)}
            keyParam="viewcondition"
            countParam="groupid"
            selectedKey={selectedKey}
            type="card"
            onChange={this.tabChange}
          />
          { this.props.children }
        </WeaRightMenu>
      </div>
    );
  }
}
export default Setting;
